<template>
	<view class="container">

		<view class="content">
			<view class="sama_title">扫描门锁背面/包装盒上的二维码或手动输入mac地址 </view>
			<view class="scan_lay">
				<input placeholder="扫一扫二维码或输入传感器mac地址" v-model="qrCode"></input>
				<image @click="openWXscan()" src="../../../static/icon/add_scan.png"></image>
			</view>
		</view>
		<view class="bootom_lay">
			<view @click="nextStep()">下一步</view>
		</view>

	</view>
</template>

<script>
	import util from '@/utils/util.js';
	import Util from '@/utils/util.js';
	export default {
		data() {
			return {
				qrCode: '', //扫一扫二维码或输入编号				
				isScan: false,
			};
		},
		onLoad(option) {		
		},
		methods: {
			nextStep() {
				if (this.qrCode.length == 0) {
					Util.toast("锁编号不能为空")
					return
				};
				if (this.isScan) {

				}
			
				let path = '/pages/mine/addlock/addLockInfo?qrCode=' + this.qrCode ;
				console.log('page---->', path)
				uni.navigateTo({
					url: path
				})
			},			
			openWXscan() {
				var that = this
				uni.scanCode({
					scanType: ['qrCode'],
					success: function(res) {
						that.qrCode = res.result.toUpperCase();						
						this.isScan = true;
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.container {
		background-color: white;
		font-size: 32rpx;

		.bootom_lay {
			position: absolute;
			bottom: 0rpx;
			left: 32rpx;
			right: 32rpx;
			bottom: 40rpx;

			:nth-child(1) {

				text-align: center;
				margin-top: 20rpx;
				color: #ffffff;
				line-height: 88rpx;
				height: 88rpx;
				border-radius: 10px;
				border: 1px solid #1D78F7;
				background: linear-gradient(135deg, #4593FF, #1C78F7);
				border-radius: 10px;
			}
		}

		.content {
			position: absolute;
			left: 0rpx;
			right: 0rpx;
			bottom: 0rpx;
			top: 0rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;
			margin-top: 72rpx;

			.sama_title {
				font-size: 32rpx;
				font-weight: bold;
				color: #1F2642;
			}

			.scan_lay {
				margin-top: 40rpx;
				display: flex;
				height: 88rpx;
				background: #F8F8FA;
				border-radius: 10px;
				padding-left: 24rpx;
				align-items: center;

				input {
					flex: 1;
					color: 1F2642;
				}

				image {
					margin-right: 24rpx;
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}
</style>